<template>
  <div class="AllMeeting">
    <el-row>
      <el-col :span="2">
        <el-button type="primary" size="small" @click="exportInfo">导出</el-button>
      </el-col>
      <el-col :span="22" class="text-right" >
        <!-- 查询 -->
        <el-form :inline="true" :model="searchForm" size="small">
          <el-form-item>
            <el-input v-model="searchForm.keyword" placeholder="输入关键字查询" class="width-120"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="tableData.slice((page - 1) * limit, page * limit)"
      style="width: 100%;"
      align="center"
      class="loading-area">
      <el-table-column
        prop="order"
        label="序号"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="会议名称"
        align="center">
        <template slot-scope="scope">
          <el-link :underline="false" @click="detail(scope.row)" type="primary" size="small">{{scope.row.name}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="会议类型"
        align="center">
      </el-table-column>
      <el-table-column
        prop="meetingTime"
        label="会议时间"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        prop="place"
        label="会议地点"
        align="center">
      </el-table-column>
      <el-table-column
        prop="founder"
        label="创建人"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="number"
        label="签到人数"
        align="center">
      </el-table-column>
    </el-table>
    <!--  分頁  -->
    <el-pagination
      ref="pagination"
      background
      @current-change="handleCurrentChange"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="count"
      hide-on-single-page>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'AllMeeting',
  data () {
    return {
      searchForm: { // 表单查询数据
        keyword: ''
      },
      limit: 10, // 每页条数
      page: 1, // 默认在第一页
      count: null,
      tableData: [], // 表格数据
      loading: true // 加载效果
    }
  },
  methods: {
    /**
     * 获取会议列表信息
     */
    init () {
      let param = {
        limit: this.limit,
        page: this.page,
        keyword: this.searchForm.keyword
      };
      this.$api.meetingList(param).then(res => {
        const loading = this.$loading({
          text: '正在加载',
          lock: true,
          target: document.querySelector('.loading-area')
        });
        this.count = res.count;
        this.tableData = res.data;
        this.tableData.forEach((item, index) => {
          this.$set(item, 'order', index + 1);
        });
        loading.close();
      })
    },
    /**
     * 查询
     */
    onSubmit () {
      this.$refs.pagination.internalCurrentPage = 1;
      this.page = 1;
      this.init();
    },
    /**
     * 翻页
     * @param {number}page 跳转的页码
     */
    handleCurrentChange (page) {
      this.page = page;
      this.init()
    },
    /**
     * 导出
     */
    exportInfo () {

    },
    detail (row) {
      console.log(row);
    }
  },
  created () {
    this.init()
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">

</style>
